import React, { useEffect, useState,useCallback } from "react";
import request from "@/utils/request";
import { Table, Button, Popconfirm, Tag, message, Card } from "antd";
import MarkdownIt from "markdown-it";
import "../css/list.css";
import { Route, Router, withRouter } from "react-router";
const md = new MarkdownIt();

function List(props) {
  // console.log(props);
  const { history, location, match } = props;

  const refShow = React.createRef();
  let [list, setList] = useState([]);
  const [again, getdata] = useState(true);
  const [showCard, changeChange] = useState(false);
  const [show, changShow] = useState(false);
  const [cardData, changeData] = useState({});

  
  //初始化时请求
  // const  useEffect(() => {
  //   request.get("/article").then(({ data }) => {
  //     setList((list = data.data));
  //   });
  // }, []);
  
  // 获取表单数据
  const getList = useCallback(async () => {
    request.get("/article").then(({ data }) => {
      setList((list = data.data));
    });
  }, []);
 useEffect(() => {
    getList();
  }, []);
  
 const removeItem = async (id) => {
    const { data } = await request.delete("/article", { data: { _id: id } });
    if (data.code === 200) {
      message.success("数据删除成功");
      getdata(!again);
    }
    getList()
  };
  //点击查看按钮
  const showItem = (id) => {
    changeData(function (state) {
      return list.filter(function (item) {
        return item._id === id;
      })[0];
    });

    changShow(true);
    changeChange(true);
  };

  // 对话框点击确认
  const handleOk = () => {
    changeChange(false);
    changShow(false);
  };
  const Goto = (id) => {
    history.push(match.path.replace("list", "put") + "/" + id);
  };
  // // 定义表格列;
  const columns = [
    {
      // 设置表头
      title: "#",
      width: 40,
      // 设置当前列显示什么数据
      dataIndex: "_id",
      render: (text, record, index) => {
        return <>{index + 1}</>;
      },
    },
    {
      title: "标题",
      dataIndex: "title",
    },
    {
      title: "描述",
      dataIndex: "descript",
    },
    {
      title: "标签",
      dataIndex: "tag",
      // text代表代表你想要的那一个字段，row：一条数据
      render: (text, row) => {
        if (Object.prototype.toString.call(text) === "[Object String]") {
          text = [text];
        }
        return (
          <>
            {text.map(function (item) {
              let color = item.length > 4 ? "magenta" : "green";
              if (item === "React") {
                color = "volcano";
              }
              return (
                <Tag color={color} key={item}>
                  {item}
                </Tag>
              );
            })}
          </>
        );
      },
    },
    {
      title: "信息",
      width: 230,
      dataIndex: "keyworks",
      render: (text, row) => {
        return (
          <>
            <div>评论:666、浏览:233、喜欢:666</div>
          </>
        );
      },
    },
    {
      title: "添加时间",
      dataIndex: "date",
      width: 120,
    },
    {
      title: "操作",
      width: 190,
      render: (row) => {
        return (
          // <React.Fragment>
          <>
            <Button
              style={{
                borderRadius: 4,
                marginRight: 4,
                color: "#3e5bdd",
                backgroundColor: "fff",
              }}
              size="small"
              onClick={() => showItem(row._id)}
            >
              查看
            </Button>
            <Button
              style={{
                borderRadius: 4,
                marginRight: 4,
                color: "#3e5bdd",
              }}
              size="small"
              onClick={() => {
                Goto(row._id);
              }}
            >
              修改
            </Button>
            <Popconfirm
              title="确认删除"
              onConfirm={() => {
                removeItem(row._id);
              }}
            >
              <Button
                style={{
                  borderRadius: 4,
                  marginRight: 4,
                  color: "#3e5bdd",
                }}
                size="small"
              >
                删除
              </Button>
            </Popconfirm>
          </>
          //</React.Fragment>
        );
      },
    },
  ];
  return (
    <>
      <div style={{ width: "100%", height: "100%" }}>
        <Table
          rowKey="_id"
          columns={columns}
          dataSource={list}
          bordered="true"
          // pagination={pagination}
        />
      </div>

      {/* 查看弹窗 */}
      <div
        className="modal"
        style={
          showCard
            ? { display: "flex" }
            : {
                display: "none",
              }
        }
      >
        <div
          style={{
            backgroundColor: "#fff",
            border: "1px solid #ccc",
            borderRadius: 5,
          }}
        >
          <Card title={"标题: " + cardData.title} style={{ width: 600 }}>
            <p style={{ fontSize: 14, marginBottom: 5 }}>
              描述：<span style={{ fontSize: 16 }}>{cardData.descript}</span>
            </p>
            <p style={{ fontSize: 14, fontWeight: 500, marginBottom: 5 }}>
              文章内容
            </p>
            <div
              style={{
                width: "100%",
                height: 300,
                overflow: "auto",
                padding: 5,
                border: "1px solid #ddd",
                borderRadius: 5,
              }}
            >
              <p
                dangerouslySetInnerHTML={
                  show
                    ? { __html: md.render(cardData.content) }
                    : { __html: "" }
                }
              ></p>
            </div>
            <div style={{ textAlign: "right" }}>
              <Button
                type="primary"
                style={{ borderRadius: 4, marginTop: 10 }}
                onClick={() => handleOk()}
              >
                知道了
              </Button>
            </div>
          </Card>
        </div>
      </div>
    </>
  );
}

List = withRouter(List);

export default List;
